// 提示设置
import React, { useState } from 'react';
import { Switch } from 'antd';
import Editor from 'src/pages/AnalyseManage/EditReport/components/EditorStyleType/Editor';
import FormItem from 'antd/lib/form/FormItem';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const Tooltip = ( props: IProps ) => {
	const { config, onValuesChange, form } = props;

	const fontConfig = [ 'fontFamily', 'fontSize', 'fontColor', 'fontBold', 'fontItalic' ];

	const [ isShowToolTip, setIsShowToolTip ] = useState(
		config.style && config.style.hasOwnProperty( 'isShowToolTip' ) ? config.style.isShowToolTip : true
	);

	const onChange = ( checked: boolean, name: string, cb: any ) => {
		cb && cb();
		form.setFieldsValue( { [name]: checked } );
		onValuesChange( config.type, config.key, { [name]: checked }, 'style' );
	};
	return (
		<div>
			<FormItem label="是否显示" name="isShowToolTip" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch
					checked={isShowToolTip}
					onChange={( checked ) => onChange( checked, 'isShowToolTip', setIsShowToolTip( checked ) )}
				></Switch>
			</FormItem>

			{isShowToolTip && (
				<FormItem label="字体" name="tooltipFont" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
					<Editor
						config={config}
						form={form}
						onValuesChange={onValuesChange}
						fontFamilyName="tooltipFontFamily"
						fontSizeName="tooltipFontSize"
						fontColorName="tooltipFontColor"
						boldName="tooltipFontBold"
						italicName="tooltipFontItalic"
						fontConfig={fontConfig}
					/>
				</FormItem>
			)}
		</div>
	);
};

export default React.memo( Tooltip );
